<template>
  <div>
    <a-input :style="bodyStyle01" v-model="value01" v-if="type01 === 1" @change="onChange" :disabled="disabled01"></a-input>
    <a-input-number :style="bodyStyle01" v-model="value01" :step="1" v-if="type01 === 2" @change="onChange" :disabled="disabled01"></a-input-number>
    <a-input-number :style="bodyStyle01" v-model="value01" :step="0.1" v-if="type01 === 3" @change="onChange" :disabled="disabled01"></a-input-number>
    <a-input-number :style="bodyStyle01" v-model="value01" :step="0.01" v-if="type01 === 4" @change="onChange" :disabled="disabled01"></a-input-number>
    <a-date-picker format="YYYY-MM-DD HH:mm:ss" :style="bodyStyle01" v-model="value01" @change="onChange" v-if="type01 === 5" :disabled="disabled01"/>
    <a-date-picker format="YYYY-MM-DD" :style="bodyStyle01" v-model="value01" @change="onChange" v-if="type01 === 6" :disabled="disabled01"/>
    <a-date-picker format="HH:mm:ss" :style="bodyStyle01" v-model="value01" @change="onChange" v-if="type01 === 7" :disabled="disabled01"/>
    <a-input v-model="value01" type="textarea" @change="onChange" :style="bodyStyle01" v-if="type01 === 8" :disabled="disabled01" />
    <a-radio-group v-model="value01" @change="onChange" :style="bodyStyle01" v-if="type01 === 9" :disabled="disabled01" >
      <a-radio :value="1">
        是
      </a-radio>
      <a-radio :value="0">
        否
      </a-radio>
    </a-radio-group>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: Number,
      default: () => {
        return undefined
      }
    },
    value: {
      type: [String,Boolean,Number],
      default: () => {
        return null
      }
    },
    id: {
      type: [Number],
      default: () => {
        return null
      }
    },
  },
  data() {
    return {
      bodyStyle01: this.bodyStyle,
      disabled01: this.bodyStyle,
      type01: this.type,
      value01: this.value,
      id01: this.id,
    }
  },
  watch: {
    type: {handler (newVal) {this.type01 = newVal}, deep: true, immediate: true},
    disabled: {handler (newVal) {this.disabled01 = newVal}, deep: true, immediate: true},
    value: {handler (newVal) {this.value01 = newVal}, deep: true, immediate: true},
    bodyStyle: {handler (newVal) {this.bodyStyle01 = newVal}, deep: true, immediate: true},
    id: {handler (newVal) {this.id01 = newVal}, deep: true, immediate: true},
  },
  methods: {
    onChange() {
      if ([5,6,7].includes(this.type01) && this.value01 && this.value01._isAMomentObject) {
        let format = this.type01 === 5?'YYYY-MM-DD HH:mm:ss':this.type01 === 6?'YYYY-MM-DD':this.type01 === 7?'HH:mm:ss':'YYYY-MM-DD'
        this.value01 = this.value01.format(format)
      }
      this.$emit('changeValue', {value:this.value01, type: this.type01, id: this.id01})
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-select-disabled .ant-select-selection {
  background-color: #fff;
}
/deep/ .ant-input {
  background-color: #fff;
}
</style>